<template>
  <div>
    <section class="haruyuki-bg-color-white">
      <!-- 商户信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-office-building"></i>
          <span class="haruyuki-ml-6">商户信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>商户编号：{{ orderInfo.rpiNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道商户编号：{{ orderInfo.aisleRpiNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道简称：{{ orderInfo.aisleKindName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>商户注册名称：{{ orderInfo.registeredName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>商户简称：{{ orderInfo.rpiName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>门店编号：{{ orderInfo.rpsNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>门店名称：{{ orderInfo.rpsName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>收银员编号：{{ orderInfo.rpstNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>收银员名称：{{ orderInfo.rpstName || '--' }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 服务商信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-s-custom"></i>
          <span class="haruyuki-ml-6">服务商信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>服务商编号：{{ orderInfo.serviceNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>服务商名称：{{ orderInfo.serviceName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>客户经理编号：{{ orderInfo.accountManager || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>客户经理名称：{{ orderInfo.accountManagerName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>本级直属服务商编号：{{ orderInfo.directServiceNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>本级直属服务商名称：{{ orderInfo.directServiceName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账接收方编号：{{ orderInfo.recRpiNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账接收方名称：{{ orderInfo.recRpiName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账项目编号：{{ orderInfo.projectCode || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账项目名称：{{ orderInfo.projectName || '--' }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 分账信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-money"></i>
          <span class="haruyuki-ml-6">分账信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>分账类型：{{ orderInfo.orderDivTypeName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账状态：{{ orderInfo.divisionStateName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账结果：{{ orderInfo.divisionResultName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账模式：{{ orderInfo.divisionModeName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账方式：{{ orderInfo.divisionPatternName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账比例：{{ orderInfo.divisionRate || '--' }}%</span>
          </el-col>
          <el-col :span="8">
            <span>订单类型：{{ orderInfo.divTradeTypeName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>订单分类：{{ orderInfo.isPosName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>交易状态：{{ orderInfo.divPayStateName || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账金额：{{ formatAmount(orderInfo.divisionAmount) }}元</span>
          </el-col>
          <el-col :span="8">
            <span>分账手续费：{{ formatAmount(orderInfo.divisionCharge) }}元</span>
          </el-col>
          <el-col :span="8">
            <span>实际分账金额：{{ formatAmount(orderInfo.divisionIntoAmount) }}元</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>是否承担手续费：{{ orderInfo.isCharge === 1 ? '是' : '否' }}</span>
          </el-col> -->
        </el-row>
      </div>

      <!-- 订单信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-s-order"></i>
          <span class="haruyuki-ml-6">订单信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>交易订单编号：{{ orderInfo.rptOrderCode || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账订单编号：{{ orderInfo.divOrderCode || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账流水号：{{ orderInfo.divSerialCode || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>交易时间：{{ orderInfo.rptPayTime || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账发起时间：{{ orderInfo.divTime || '--' }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-wallet"></i>
          <span class="haruyuki-ml-6">金额信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>订单金额：{{ formatAmount(orderInfo.rptAmount) }}元</span>
          </el-col>
          
          <el-col :span="8">
            <span>退款金额：{{ formatAmount(orderInfo.refundAmount) }}元</span>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-mobile"></i>
          <span class="haruyuki-ml-6">设备信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>终端编号：{{ orderInfo.rtNo || '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span>设备序列号：{{ orderInfo.rsSn || '--' }}</span>
          </el-col>
        </el-row>
      </div> -->
    </section>
  </div>
</template>

<script>
import { getDetail } from "@/api/rb-oem/separateFunds/separate_order";

export default {
  name: "OrderDetails",
  props: {
    orderId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      orderInfo: {}
    };
  },
  watch: {
    orderId: {
      handler(val) {
        if (val) {
          this.getOrderDetail();
        }
      },
      immediate: true
    }
  },
  methods: {
    getOrderDetail() {
      this.loading = true;
      getDetail(this.orderId).then(res => {
        if (res.data.success) {
          this.orderInfo = res.data.data;
        } else {
          this.$message.error(res.data.msg || '获取订单详情失败');
        }
      }).catch(err => {
        console.error('获取订单详情失败', err);
        this.$message.error('获取订单详情失败');
      }).finally(() => {
        this.loading = false;
      });
    },
    formatAmount(amount) {
      if (amount === undefined || amount === null || amount === '') {
        return '0.00';
      }
      return parseFloat(amount).toFixed(2);
    }
  }
};
</script>

<style lang="scss" scoped>
.haruyuki-bg-color-white {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.haruyuki-content {
  padding: 20px;
  margin-bottom: 30px;

  .el-col {
    margin-bottom: 15px;
  }
}

.haruyuki-ml-6 {
  margin-left: 6px;
}

.haruyuki-mb-10 {
  margin-bottom: 10px;
}

.haruyuki-flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.haruyuki-align-items-center {
  align-items: center;
}

.haruyuki-size-16 {
  font-size: 16px;
  font-weight: bold;
}
</style>